<template>
    <div class="goodsStandard list-wrap-pk ">
        <pk-cell is-link :border="false">
            <!-- 使用 title 插槽来自定义标题 -->
            <template slot="title">
                <div class="d-inline-pk text-light-pk" style="width: 40px">选择</div>
                <div class="d-inline-pk">选择 规格</div>
            </template>
        </pk-cell>
        <div class="attrImgWrap">
            <pk-img v-for="item in attrImgList"
                    :key="item.attrId"
                    :src="item.picture" class="attrImg">
            </pk-img>
            <div>共{{standardList.length}}种规格可选</div>
        </div>
    </div>
</template>

<script>
    /*
    * handleAttrPop 点击事件不能放在父元素
    * 否则组件里面的点击事件会冒泡触发父元素事件
    * */

    import PkCell from "../../components/PkCell";
    import PkImg from "../../components/PkImg";
    export default {
        name: "goodsStandard",
        props: {
            goodsInfo: {
                type: Object,
                default: function () {
                    return {}
                }
            }
        },
        components: { PkImg, PkCell},

        data() {
            return {
                standardList: [],
                attrImgList: [], //空间问题，最多展示 3张
                attrPop: false
            }
        },
        mounted() {
            if(this.typeId) {
                this.initData()
            }
        },
        computed: {
            typeId() {
                return this.goodsInfo.typeId
            }
        },
        watch: {
            typeId(val) {
                if(val) {
                    this.initData()
                }
            }
        },
        methods: {
            initData()  {
                this.standardList = this.goodsInfo.goodsAttrList;
                this.attrImgList = this.standardList.length > 2 ? this.standardList.slice(0,2) : this.standardList
            }
        }
    }
</script>

<style lang="scss" scoped>
    .goodsStandard {
        .attrImgWrap {
            padding-left: 50px;
            padding-bottom: 4px;
            display: flex;
            align-items: center;
            .attrImg {
                padding-right: 10px;
            }
            /deep/img {
                width: 30px;
                height: 30px;
            }
        }
    }

</style>
